<template>
  <div>
    <user-info></user-info>
    <div class="CommonList">
      <el-form
        class="detail-form-content"
        ref="ruleForm"
        :model="ruleForm"
        label-width="80px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item
              v-if="flag == 'yonghu'"
              label="用户名"
              prop="yonghuming"
            >
              <el-input
                v-model="ruleForm.yonghuming"
                readonly
                placeholder="用户名"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item v-if="flag == 'yonghu'" label="密码" prop="mima">
              <el-input
                v-model="ruleForm.mima"
                placeholder="密码"
                clearable
              ></el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item v-if="flag == 'yonghu'" label="姓名" prop="xingming">
              <el-input
                v-model="ruleForm.xingming"
                placeholder="姓名"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="flag == 'yonghu'" label="性别" prop="xingbie">
              <el-select v-model="ruleForm.xingbie" placeholder="请选择性别">
                <el-option
                  v-for="(item, index) in yonghuxingbieOptions"
                  v-bind:key="index"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item v-if="flag == 'yonghu'" label="头像" prop="touxiang">
              <file-upload
                tip="点击上传头像"
                action="file/upload"
                :limit="3"
                :multiple="true"
                :fileUrls="ruleForm.touxiang ? ruleForm.touxiang : ''"
                @change="yonghutouxiangUploadChange"
              ></file-upload>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item v-if="flag == 'yonghu'" label="手机" prop="shouji">
              <el-input
                v-model="ruleForm.shouji"
                placeholder="手机"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>

          <!-- *************************************************** -->
          <el-col :span="12">
            <el-form-item v-if="flag == 'yonghu'" label="地址" prop="address">
              <el-input
                v-model="ruleForm.address"
                placeholder="地址"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>

          <el-form-item v-if="flag == 'users'" label="用户名" prop="username">
            <el-input
              v-model="ruleForm.username"
              placeholder="用户名"
            ></el-input>
          </el-form-item>

          <el-col :span="24">
            <el-form-item>
              <el-button type="primary" @click="onUpdateHandler"
                >修 改</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<script>
// 数字，邮件，手机，url，身份证校验
import {
  isNumber,
  isIntNumer,
  isEmail,
  isMobile,
  isURL,
  checkIdCard,
} from "@/utils/validate";

import UserInfo from "../components/common/UserInfo.vue";

export default {
  components: { UserInfo },
  data() {
    return {
      ruleForm: {},
      address: {},
      flag: "",
      usersFlag: false,
      yonghuxingbieOptions: [],
    };
  },
  mounted() {
    var table = this.$storage.get("sessionTable");
    this.flag = table;
    this.$http({
      url: `${this.$storage.get("sessionTable")}/session`,
      method: "get",
    }).then(({ data }) => {
      if (data && data.code === 0) {
        this.ruleForm = data.data;
        let id = this.ruleForm.id;
        // this.$http({
        //   url: "address/detail/" + id,
        //   method: "get",
        // }).then(({ data }) => {
        //   if (data && data.code === 0) {
        //     console.log(data);
        //     this.address = data.data;
        //   }
        // });
      } else {
        this.$message.error(data.msg);
      }
    });
    this.yonghuxingbieOptions = "男,女".split(",");
  },
  methods: {
    yonghutouxiangUploadChange(fileUrls) {
      this.ruleForm.touxiang = fileUrls;
    },
    onUpdateHandler() {
      if (!this.ruleForm.yonghuming && "yonghu" == this.flag) {
        this.$message.error("用户名不能为空");
        return;
      }
      if (!this.ruleForm.mima && "yonghu" == this.flag) {
        this.$message.error("密码不能为空");
        return;
      }
      if (!this.ruleForm.xingming && "yonghu" == this.flag) {
        this.$message.error("姓名不能为空");
        return;
      }
      if (
        "yonghu" == this.flag &&
        this.ruleForm.money &&
        !isNumber(this.ruleForm.money)
      ) {
        this.$message.error(`余额应输入数字`);
        return;
      }
      this.$http({
        url: `${this.$storage.get("sessionTable")}/update`,
        method: "post",
        data: this.ruleForm,
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "修改信息成功",
            type: "success",
            duration: 1500,
            onClose: () => {},
          });
        } else {
          this.$message.error(data.msg);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.CommonList {
  margin-left: 300px;
}
.user-info {
  width: 600px;
}
</style>
